<template>
  <div style="padding: 20px">
    <el-form :model="form" size="small">
      <el-form-item label="尖">
        <el-button type="text" @click="tipAddon">新增尖时段</el-button>
        <el-row v-for="(item,index) in form.tip" :key="index" :gutter="20" style="margin-bottom:20px">
          <el-col :span="22">
            <el-slider class="tip-class" v-model="form.tip[index]" range show-stops :max="sliderMax" :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
          </el-col>
          <el-col :span="2">
            <el-button v-if="index>0" type="text" @click="tipDeleteOn(index)">删除</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="峰">
        <el-button type="text" @click="peakAddon">新增峰时段</el-button>
        <el-row v-for="(item,index) in form.peak" :key="index" :gutter="20" style="margin-bottom:20px">
          <el-col :span="22">
            <el-slider class="peak-class" v-model="form.peak[index]" range show-stops :max="sliderMax" :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
          </el-col>
          <el-col :span="2">
            <el-button v-if="index>0" type="text" @click="peakDeleteOn(index)">删除</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="平">
        <el-button type="text" @click="flatAddon">新增平时段</el-button>
        <el-row v-for="(item,index) in form.flat" :key="index" :gutter="20" style="margin-bottom:20px">
          <el-col :span="22">
            <el-slider class="flat-class" v-model="form.flat[index]" range show-stops :max="sliderMax" :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
          </el-col>
          <el-col :span="2">
            <el-button v-if="index>0" type="text" @click="flatDeleteOn(index)">删除</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="谷">
        <el-button type="text" @click="valleyAddon">新增谷时段</el-button>
        <el-row v-for="(item,index) in form.valley" :key="index" :gutter="20" style="margin-bottom:20px">
          <el-col :span="22">
            <el-slider v-model="form.valley[index]" range show-stops :max="sliderMax" :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
          </el-col>
          <el-col :span="2">
            <el-button v-if="index>0" type="text" @click="valleyDeleteOn(index)">删除</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- <el-form-item label="">
        <el-button type="" @click="submitOn">确定</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 滑块长度
      sliderMax: 48,
      form: {
        tip: [[0, 1]], // 尖
        peak: [[0, 0]], // 峰
        flat: [[0, 0]], // 平
        valley: [[0, 0]] // 谷
      },
      // 替换文本
      marks: {}
    }
  },
  created() {
    this.maskListOn(48)
  },
  mounted() {
    // this.maskListOn()
  },
  methods: {
    /**
     * 尖时段
     */
    // 新增
    tipAddon() {
      this.form.tip.push([0, 0])
    },
    // 删除
    tipDeleteOn(index) {
      this.form.tip.splice(index, 1)
    },
    /**
     * 峰时段
     */
    // 新增
    peakAddon() {
      this.form.peak.push([0, 0])
    },
    // 删除
    peakDeleteOn(index) {
      this.form.peak.splice(index, 1)
    },
    /**
     * 平时段
     */
    // 新增
    flatAddon() {
      this.form.flat.push([0, 0])
    },
    // 删除
    flatDeleteOn(index) {
      this.form.flat.splice(index, 1)
    },
    /**
     * 谷时段
     */
    // 新增
    valleyAddon() {
      this.form.valley.push([0, 0])
    },
    // 删除
    valleyDeleteOn(index) {
      this.form.valley.splice(index, 1)
    },
    /**
     * 尖峰平谷之一的单个数据的去重+可合并提醒，name是对象键值
     */
    duplicateRemovalAndMerge(name,form){
      // 成绩最后结果
      let list = []
      let copyList = []
      // 循环尖峰平谷对应数组的子数组数据
      form[name].map((item, index) => {
        let arr = []
        // 数组拓充
        for(let i = item[0]; i <= item[1] ; i++){
            arr.push(i)
        }
        list.push(arr)
      })
      // 数组合并
      list = list.flat()
      copyList = [...new Set(list)]
      return list.length-copyList.length
      if(list.length-copyList.length == 0){
        return list
      }else if(list.length-copyList.length == 1){
        this.$message.error('有可合并时间段，请重新选择')
        return
      }else if(list.length-copyList.length>1){
        this.$message.error('有重复时间段，请重新选择或删除重复数据')
        return
      }
      
    },
    submitOn() {
      // 键值内部判断是否重复
      for(let i in this.form){
        if(this.duplicateRemovalAndMerge(i,this.form) > 0){
          this.$message.error('有可合并时间段，请重新选择')
          return false
        }
      }
      // 内部无重复，this.form数据都能用，判断this.form键与键之间的数据
      // 数据改造，已知每个数只有两个属性，头或尾，两个头或两个尾不允许
      // list是所有节点数据
      let list = this.addHeadEnd(this.form)
      // 之后找出是否含有两个完全一样的元素，或一个是head、end全true，另一个是只有head或end是true的元素，证明有重复元素
      if(this.findSameElement(list)){
        // 无重复数据
        // this.$message.success('添加时间段成功')
        // 子组件向父组件传值
        // this.$emit('change',this.form)
        return this.form
      }else{
        // 有重复数据
        this.$message.error('尖峰平谷时间段冲突，请重新选择')
        return false
      }
    },
    /** 
     * 数据增加头尾属性
     */
    addHeadEnd(form){
      let list = []
      // 每个数两个属性，头或尾，一个数组中间的数头尾都占了，所以不允许二次出现，头尾数字相对，头出现下次再出现就是尾
      // 尾出现下次出现是头数据
      // 将每个分组内部先定义
      for(let key in form){
        form[key].map(item=>{
          let arr = []
          // 数组拓充
          for(let i = item[0]; i <= item[1] ; i++){
              arr.push(i)
          }
          list.push(this.arrToObj(arr))
          list = list.flat()
          // 在此处将数据增加头尾属性
        })
      }
      return list
    },
    /**
     * 数组转对象
     */
    arrToObj(arr){
      let obj = []
      if(arr.length>1){
        // 数组有两个值进行判断，没有进行尖峰平谷选择不判断
        arr.forEach((item,index)=>{
          if(index == 0){
            // 只有头属性
            obj[index] = {
              num:item,
              head: true,
              end: false
            }
          }else if(index == arr.length-1){
            // 只有尾属性
            obj[index] = {
              num:item,
              head: false,
              end: true
            }
          }else{
            // 头属性尾属性都有
            obj[index] = {
              num:item,
              head: true,
              end: true
            }
          }
        })
      }
      return obj
    },
    /**
     * findSameElement,找到对象数组是否有相同的元素
     */
    findSameElement(arr){
      let list = []
      // head是true,end是true
      let arrcopy = []
      for(let i = 0;i<arr.length;i++){
        if(arr[i].head&&arr[i].end){
          arrcopy.push(arr[i])
        }
      }
      // head或end有一个是true
      let arrcopy2 = []
      for(let i = 0;i<arr.length;i++){
        if((arr[i].head&&!arr[i].end)||(!arr[i].head&&arr[i].end)){
          arrcopy2.push(arr[i])
        }
      }
      for(let i = 0;i<arrcopy.length;i++){
        for(let j = 0;j<arrcopy2.length;j++){
          if(arrcopy[i].num == arrcopy2[j].num){
            // 当全true的数组里和整集的有相同元素时
            return false
          }
        }
      }
      arr.map(item=>{
        list.push(''+item.num+item.head+item.end)
      })
      return list.length == [...new Set(list)].length
    },
    /**
     * 滑块的文字描述
     */
    maskListOn(data) {
      if(data == 24){
        // 1小时制
        for (let i = 0; i < 25; i++) {
          if (i < 10) {
            this.marks[i] = '0' + i + ':00'
          } else {
            this.marks[i] = i + ':00'
          }
        }
      }else if(data == 48){
        // 半小时制
        for(let i = 0;i<49;i++){
          if(i % 2 == 0){
            // 偶数显示
            this.marks[i] = i/2 + ':00'
          }
        }
      }
    },
    /**
     * 
     * @param {滑块的tooltip文字描述} val 
     */
    formatTooltip(val) {
      if(val % 2 == 0){
        // 偶数
        return val / 2 + ':00'
      }else{
        // 奇数
        let str = (val/2)+''
        str = str.split('.')[0]
        return str+':30'
      }
    }
  }
}
</script>
<style scoped>
/** 
 * 尖时段选中颜色
 * 孙琮
 */
.tip-class /deep/ .el-slider__bar{ 
  background: rgb(221, 218, 21); 
}
.tip-class /deep/ .el-slider__button{
  border: solid 2px rgb(221, 218, 21); 
}
/** 
 * 峰时段选中颜色
 * 孙琮
 */
.peak-class /deep/ .el-slider__bar{ 
  background: rgb(230, 12, 12); 
}
.peak-class /deep/ .el-slider__button{
  border: solid 2px rgb(230, 12, 12); 
}
/** 
 * 平时段选中颜色
 * 孙琮
 */
.flat-class /deep/ .el-slider__bar{ 
  background: rgb(48, 230, 12); 
}
.flat-class /deep/ .el-slider__button{
  border: solid 2px rgb(48, 230, 12); 
}
</style> 